<template>
  <div class="component-store-billing">
    <div class="list">
      <el-table
        :data="tableData"
        style="width: 100%"
        header-cell-class-name="table-header"
        row-class-name="table-row-low"
        @sort-change="sortChange"
      >
        <el-table-column
          :label="$t('formData.serialNumber')"
          type="index"
          width="70"
        />
        <el-table-column
          :label="$t('coupon.shopName')"
          prop="shopName"
        />
        <el-table-column
          prop="settledAmount"
          :label="$t('shopWallet.availableStoreBalances')"
          sortable="custom"
        >
          <template #default="scope">
            <span> {{ scope.row.settledAmount !== null ? '￥' + scope.row.settledAmount : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="totalSettledAmount"
          :label="$t('shopWallet.settledAmount')"
        >
          <template #default="scope">
            <span>￥ {{ scope.row.totalSettledAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="unsettledAmount"
          :label="$t('shop.pendingSettlement')"
        >
          <template #default="scope">
            <span>￥ {{ scope.row.unsettledAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('shop.unusableBalanceYuan')"
          prop="freezeAmount"
        >
          <template #default="scope">
            <span>￥ {{ scope.row.freezeAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="operation"
          :label="$t('remindPop.operation')"
          align="center"
        >
          <template #default="scope">
            <!-- <div class="default-btn text-btn" @click="exportFrom(scope.row.orderNumber)">{{$t("shopWallet.exportRiconciliazioneDetail")}}</div> -->
            <div
              class="default-btn text-btn"
              @click="handleDetail(scope.row.shopId)"
            >
              {{ $t("user.details") }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页条 -->
    <!-- <pagination style="text-align: right" :total="total" :page.sync="params.pageNum" :limit.sync="params.pageSize" @pagination="pagination" /> -->
    <el-pagination
      class="paging"
      :current-page="timeData.current"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="timeData.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { onActivated, reactive } from 'vue'
import { useRouter } from 'vue-router'

const Data = reactive({
  time: '',
  total: 0,
  params: {
    pageNum: 1,
    pageSize: 10
  },
  tableData: [],
  reconciliationDetails: {
    wechatAmount: 0.00,
    wechatPercent: 0.00,
    alipayAmount: 0.00,
    alipayPercent: 0.00,
    balanceAmount: 0.00,
    balancePercent: 0.00,
    paypalAmount: 0.00,
    paypalPercent: 0.00
  },
  timeData: {},
  sortType: 0
})

const { total, tableData, timeData } = toRefs(Data)

const routerStore = useRouterStore()
onActivated(() => {
  routerStore.updateIncludePageList(['finance-store-billing/index'])
  routerStore.pushHisPageList(['finance-store-billing/index'])
})

const getDataDetail = (params) => {
  const sortType = Data.sortType
  Data.timeData = { ...params, sortType }
  Data.tableData = []
  http({
    url: http.adornUrl('/shop/shopWallet/pageShopWalletByTime'),
    method: 'get',
    params: Data.timeData
  }).then(({ data }) => {
    Data.reconciliationDetails = data.records
    Data.tableData = data.records
    Data.total = data.total
  })
}

const router = useRouter()
// 跳转到明细详情页
const handleDetail = (shopId) => {
  // 增加缓存页面
  routerStore.updateIncludePageList(['finance-store-billing/trading'])

  router.push({
    path: '/finance/store-billing/trading',
    query: {
      type: 1,
      shopId,
      ...Data.timeData
    }
  })
}

const sortChange = (data) => {
  // 排序类型 0无 1 正序 2倒序
  switch (data.order) {
    case 'descending': Data.sortType = 2
      break
    case 'ascending': Data.sortType = 1
      break
    default: Data.sortType = 0
      break
  }
  getDataDetail(Data.timeData)
}

// 页数的切换
const handleSizeChange = (val) => {
  Data.pageSize = val
  Data.timeData.size = val
  getDataDetail(Data.timeData)
}

//  换页
const handleCurrentChange = (val) => {
  Data.currentPage = val
  Data.timeData.current = val
  getDataDetail(Data.timeData)
}

defineExpose({
  getDataDetail
})
</script>

<style lang="scss" scoped>
.component-store-billing {
  .list {
    margin-top: 25px;
    padding-bottom: 30px;
  }
}
</style>
